<template>
  <div id="home">
    这里是首页
    <input type="text" placeholder="请输入内容" />
  </div>
</template>

<script setup>
import {onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router';
import {onMounted, onUnmounted, onActivated, onDeactivated} from 'vue';

onMounted( () => {
  console.log("Home ----> onMounted");
});

onUnmounted( () => {
  console.log("Home ----> onUnmounted");
});

// 当组件被 keep alive 包裹之后，路由在被激活的时候调用
onActivated( () => {
  console.log("Home ----> onActivated");
});

// 当组件被 keep alive 包裹之后，路由在离开的时候调用
onDeactivated( ()=> {
  console.log("Home ----> onDeactivated");
});

// 可以在组件内部使用守卫
onBeforeRouteLeave((to, from, next) => {
  next();
});

onBeforeRouteUpdate( (to, from, next)=> {
  // next();
});

</script>

<style scoped>
#home{
  width: 400px;
  height: 500px;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
